<template>
  <!-- 选择派出所 -->
  <view class="leadPoliceStation">
    <view class="policeTitle">
      <u--input
        v-model="likeName"
        :maxlength="15"
        placeholder="请输入小区名称"
        prefixIcon="search"
        border="surround"
        clearable
        @change="changeHandle"
        class="cus-input"
      ></u--input>
    </view>

    <!-- distance < 1 distance乘1000 单位是m
      distance > 1 distance直接取，不做处理   单位km  -->
    <view class="policenameClass">
      <view
        class="position-wrap"
        v-for="item in policeList"
        @click="rdioHandle(item)"
      >
        <view class="position-name">
          <u-icon name="map" color="#000" size="14"></u-icon>
          <text> {{ item.fNames }}</text>
          <view class="distanc">
            <block v-if="item.distance">
              <!-- {{ (item.distance / 1000).toFixed(1) }}{{ item.unit }} -->
              {{ item.distance }}{{ item.unit }}
            </block>
            <block v-else>未知距离</block>
          </view>
        </view>
      </view>
    </view>

    <view class="pageBottom" v-if="pageBottom" style="padding: 25rpx 0">
      —— 到底了 ——
    </view>

    <view v-if="!policeList.length">
      <u-empty
        mode="list"
        text="什么都没找到！"
        :icon="baseImgUrl + 'no-icon7.png'"
      >
      </u-empty>
    </view>
  </view>
</template>

<script>
import { navBack } from "@/utils/util.js";
import { getAction } from "@/utils/request.js";
export default {
  name: "leadPoliceStation",
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      options: {},
      likeName: "",
      policeList: [],
      pageBottom: false,
      pageConfig: {
        pageNo: 1,
        pageSize: 50,
        total: 0,
      },
    };
  },
  onLoad(options) {
    this.options = options;
    this.getSeleList();
  },
  onReachBottom() {
    let current = (this.pageConfig.pageNo += 1);
    let pages = Math.ceil(this.pageConfig.total / this.pageConfig.pageSize);
    if (current <= pages) {
      this.getSeleList();
    } else {
      this.pageBottom = true;
    }
  },
  methods: {
    changeHandle(e) {
      if (e) {
        this.policeList = [];
        this.getSeleList();
      }
    },
    rdioHandle(item) {
      //   for (var v of this.policeList) {
      //     v.id == item.id ? (v.flag = true) : (v.flag = false);
      //   }

      //   let office = this.policeList.filter((v) => {
      //     if (v.flag) return v;
      //   });
      uni.$emit("community", item);
      navBack();
    },

    async getSeleList() {
      let data = {
        houseLng: this.options.lng,
        houseLat: this.options.lat,
        likeName: this.likeName,
        pageNo: this.pageConfig.pageNo,
        pageSize: this.pageConfig.pageSize,
      };

      let res = await getAction("/mini/company/message/mapPoints", data);
      const list = res.result.records.map((v) => ({
        id: v.fDzbm,
        distance: v.distance
          ? Number(v.distance) < 1
            ? Number(v.distance).toFixed(2) * 1000
            : Number(v.distance).toFixed(2)
          : "",
        unit: Number(v.distance) < 1 ? "m" : "km",
        fNames: v.fNames,
        flag: false,
      }));
      this.policeList = this.policeList.concat(list);
      this.pageConfig.total = res.result.total;
    },
  },
};
</script>

<style lang="scss" scoped>
.leadPoliceStation {
  flex: 1;
  padding: 0 15rpx;
  background: #f9f9f9;

  .policenameClass {
    margin-top: 18rpx;
    border-radius: 8rpx;
    background-color: #fff;
    .position-wrap {
      height: 100rpx;
      margin-left: 60rpx;
      margin-right: 16rpx;
      padding: 18rpx 0;
      border-bottom: 1rpx solid #e8e8e8;

      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .position-name {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        text {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 30rpx;
          color: #181818;
        }
      }

      .position-addr {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: PingFang SC, PingFang SC;
        color: #6a6a6a;

        .add-detail {
          font-weight: 500;
          font-size: 24rpx;
          width: 548rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .distanc {
          font-weight: 400;
          font-size: 26rpx;
        }
      }
    }
  }
}
::v-deep .u-icon,
.u-icon__icon {
  position: absolute;
  left: -40rpx;
}
</style>
